<template>
	<van-popup v-model="showPopup" position="bottom" :style="{ height: '64%' }">
		<div class="provinces-box">
			<div class="provinces-title">请选择所在地区</div>
			<van-steps direction="vertical" active-icon="circle" active-color="#F7383C" :active="activeIndex"
				@click-step="clickStep">
				<van-step>
					<div class="stepItem">
						{{ selectArr[0] > -1 ? province[selectArr[0]].Name : '请选择省' }}
					</div>
				</van-step>
				<van-step>
					<div class="stepItem">
						{{ selectArr[1] > -1 ? city[selectArr[1]].Name : '请选择市' }}
					</div>
				</van-step>
				<van-step class="van-step-bottom">
					<div class="stepItem">
						{{ selectArr[2] > -1 ? district[selectArr[2]].Name : '请选择区/县' }}
					</div>
				</van-step>
				</van-step>
			</van-steps>
			<div class="provinces-list">
				<div class="provinces-list-title">
					{{ activeIndex == 0 ? '请选择省' : '' }}
					{{ activeIndex == 1 ? '请选择市' : '' }}
					{{ activeIndex >= 2 ? '请选择区/县' : '' }}
				</div>
				<div class="provinces-list-box">
					<div v-for="(item, index) in provincesList" :key="item.Id" class="provinces-item"
						@click="select(index)">
						{{ item.Name }}
					</div>
				</div>
			</div>
		</div>
	</van-popup>
</template>

<script>
	import Provinces from '../assets/js/provinces.js'

	export default {
		name: 'provinces-picker',
		props: {
			show: {
				type: Boolean,
				default: false,
				required: true,
			},
			pickerSwitch: {
				type: Function,
				required: true,
			},
			selectResult: {
				type: Function,
				required: true,
			}
		},
		data() {
			return {
				// showPopup: this.show,
				province: Provinces,
				city: [],
				district: [],
				activeIndex: 0,
				selectArr: [-1, -1, -1],
			}
		},
		methods: {
			clickStep(i) {
				if (this.selectArr[i] == -1) return;
				this.activeIndex = i;
				for (let j = 0; j < this.selectArr.length; j++) {
					if (j >= i) {
						this.selectArr[j] = -1
					}
				}
			},
			select(i) {
				this.activeIndex++;
				switch (this.activeIndex) {
					case 1:
						this.selectArr[0] = i;
						this.city = this.province[i].children
						if (this.city.length == 0) {
							this.returnResult()
						}
						break
					case 2:
						this.selectArr[1] = i;
						this.district = this.city[i].children
						if (this.district.length == 0) {
							this.returnResult()
						}
						break
					default:
						this.selectArr[2] = i;
						if (this.activeIndex > 3) {
							this.activeIndex = 3
						}
						this.returnResult()
						break
				}
			},
			returnResult() {
				setTimeout(() => {
					console.log(this.selectArr)
					
					let value = this.province[this.selectArr[0]].Name;
					let Ids = [this.province[this.selectArr[0]].Id]
					
					if (this.selectArr[1] != -1) {
						value += ' - ' + this.city[this.selectArr[1]].Name;
						Ids.push(this.city[this.selectArr[1]].Id)
					}
					if (this.selectArr[2] != -1) {
						value += ' - ' + this.district[this.selectArr[2]].Name;
						Ids.push(this.district[this.selectArr[2]].Id)
					}
					let data = {
						value: value,
						Ids: Ids,
						// selectArr: this.selectArr
					}
					console.log(data)
					this.selectResult(data);
				}, 200)
			}
		},
		computed: {
			showPopup: {
				get() {
					if (this.show) {
						this.selectArr = [-1, -1, -1];
						this.activeIndex = 0;
					}
					return this.show
				},
				set(val) {
					this.pickerSwitch()
				},
			},
			provincesList() {
				let list = [] //默认
				switch (this.activeIndex) {
					case 0:
						list = this.province //默认
						break
					case 1:
						list = this.city
						break
					default:
						list = this.district
						break
				}
				return list
			},
		},
	}
</script>

<style>
	.van-step__line {
		width: 0.01rem !important;
	}

	.van-step-bottom .van-step__line {
		display: none;
	}

	.van-step--vertical:not(:last-child)::after {
		display: none;
	}

	.van-icon-circle::before {
		font-size: 12px;
		width: 11px;
		height: 11px;
		min-width: 11px;
		min-height: 11px;
		background-color: #ffffff;
		transform: scale(0.65);
		/* IE 9 */
		-ms-transform: scale(0.65);
		/* Safari and Chrome */
		-webkit-transform: scale(0.65);
	}
</style>

<style scoped>
	.provinces-box {
		height: 100%;
		background-color: #FFFFFF;
	}

	.provinces-title {
		height: 0.9rem;
		text-align: center;
		font-size: 0.3rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 0.3rem;
		padding: 0.3rem 0;
	}

	.stepItem {
		height: 0.36rem;
		text-align: left;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 0.36rem;
	}

	.provinces-list {
		width: 100%;
		padding: 0.3rem 0.4rem 0;
		height: calc(100% - 2rem - 60px);
		min-height: calc(100% - 2rem - 60px);
		border-top: 0.02rem solid #979797;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		overflow: hidden;
	}

	.provinces-list-title {
		text-align: left;
		height: 0.36rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.5);
		line-height: 0.36rem;
	}

	.provinces-list-box {
		width: 100%;
		padding-top: 0.2rem;
		height: calc(100% - 0.56rem);
		max-height: calc(100% - 0.56rem);
		overflow: auto;
	}

	.provinces-item {
		text-align: left;
		height: 0.8rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.8rem;
		padding-left: 0.1rem;
	}
</style>
